<script setup lang="ts">
import DataEchart from "./DataEchart.vue";
import DataCircle from "./DataCircle.vue";

</script>
    
<template>
    <div class="container">
        <div class="container_left">
            <div class="header">
                <div class="box">
                    <div class="box_left">
                        <div>全站成员</div>
                        <div>127</div>
                    </div>
                    <img src="/course/trend.svg" alt="">
                </div>
                <div class="box">
                    <div class="box_left">
                        <div>在线人数</div>
                        <div>66</div>
                    </div>
                    <img src="/course/trend2.svg" alt="">
                </div>
                <div class="box">
                    <div class="box_left">
                        <div>今天打卡</div>
                        <div>45</div>
                    </div>
                    <img src="/course/trend3.svg" alt="">
                </div>
            </div>
            <div class="body">
                <DataEchart></DataEchart>
            </div>
        </div>
        <div class="right">
            <DataCircle></DataCircle>
        </div>
    </div>
</template>
    
<style scoped lang="scss">
.container {
    @include flex;

    &_left {
        width: 70%;

        .header {
            @include flex;
            margin-top: 100px;

            .box {
                width: 250px;
                width: 25%;
                // height: 120px;
                height: 15%;
                border-radius: 10px;
                @include flex(space-around);
                padding: 20px;
                box-shadow: $box-shadow;

                &_left {
                    div:nth-child(2) {
                        color: $theme-color;
                        font-size: 30px;
                        font-weight: 600;
                    }
                }
            }
        }

        .body {
            margin-top: 90px;
            @include flex(center);
        }
    }

    .right {
        width: 30%;
        height: 100%;
    }
}
</style>